<template>
  <div>
    <van-swipe :autoplay="3000">
      <van-swipe-item v-for="(image, index) in goods.info.gallery" :key="index">
        <img v-lazy="image" width="100%" />
      </van-swipe-item>
    </van-swipe>

    <van-cell-group class="item_cell_group" v-if="goods">
      <van-cell>
        <div>
          <span class="item_price">{{goods.info.retailPrice | rmb}}</span>
          <span class="item_market_price">{{goods.info.counterPrice |rmb}}</span>
        </div>
        <div class="item-title">{{ goods.info.name }}</div>
        <div class="item_intro">{{goods.info.brief}}</div>
      </van-cell>
    </van-cell-group>

    <van-cell-group>
      <van-cell title="规格" is-link value="请选择" />
      <van-cell title="属性" is-link @click="showAttributes()" />
      <van-cell title="运费" value="满88免运费" />
    </van-cell-group>

    <attributes ref="attrs" :attrs="goods.attribute" />
    <spec ref="spec" :goods="goods"/>
  </div>
</template>
<script>
import { getGoodsDetail } from "@/api/goods";
import "@/assets/scss/common.scss";
import Attributes from "./attributes";
import { Swipe, SwipeItem, Cell, CellGroup } from "vant";
export default {
  components: {
    [Swipe.name]: Swipe,
    [SwipeItem.name]: SwipeItem,
    [Cell.name]: Cell,
    [CellGroup.name]: CellGroup,
    Attributes
  },
  props: {
    pid: [Number, String],
    goods: {
      // 定义属性
      type: Object,
      default() {
        return {
          info: {
            gallery: []
          }
        };
      }
    }
  },
  data() {
    return {
    };
  },
  created() {
    //    获取上一个页面传过来的id,根据id查询商品详情
    // this.$router
    // this.$route

    // console.log(this.$route.params)
    console.log(this.pid);
    this.initData(); //获取商品详情
  },
  methods: {
    initData() {
      getGoodsDetail(this.pid).then(res => {
        console.log(res);
        this.goods = res.data.data;
      });
    },
    showAttributes() {
      //    调用子组件Attributes.shows()
      this.$refs.attrs.shows();
    }
  }
};
</script>
<style lang="scss" scoped>
@import "~@/assets/scss/_var.scss";
.item_detail {
  img {
    max-width: 100%;
  }
}

.item_cell_group {
  margin-bottom: 15px;
}

.item_price {
  font-size: 20px;
  color: $red;
  margin-right: 10px;
}

.item_market_price {
  color: $font-color-gray;
  text-decoration: line-through;
  font-size: $font-size-small;
}

.item-title {
  line-height: 1.4;
}

.item_dispatch {
  font-size: $font-size-small;
  color: $font-color-gray;
}

.item_intro {
  line-height: 18px;
  margin: 5px 0;
  font-size: $font-size-small;
  color: $font-color-gray;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}

.item_desc {
  background-color: #fff;
  /deep/ p {
    padding: 0 10px;
    margin-block-start: 0 !important;
    margin-block-end: 0 !important;
  }
  /deep/ img {
    max-width: 100%;
    display: block;
  }
}

.item_desc_title {
  //   @include one-border;
  padding: 10px 0;
  text-align: center;
}
</style>
